<script setup lang="ts">
import { ref } from 'vue';

import MicroscopeManagement from './components/MicroscopeManagement.vue';
import UltrasoundManagement from './components/UltrasoundManagement.vue';
import XrayManagement from './components/XrayManagement.vue';

// 响应式数据
const activeModule = ref('xray');

// 方法
const handleModuleChange = (key: string) => {
  activeModule.value = key;
};
</script>

<template>
  <div class="imaging-container">
    <!-- 顶部导航 -->
    <div class="top-nav">
      <a-tabs v-model:active-key="activeModule" @change="handleModuleChange">
        <a-tab-pane key="xray" tab="X光管理">
          <XrayManagement />
        </a-tab-pane>
        <a-tab-pane key="ultrasound" tab="B超管理">
          <UltrasoundManagement />
        </a-tab-pane>
        <a-tab-pane key="microscope" tab="显微镜检查">
          <MicroscopeManagement />
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<style scoped>
.imaging-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f5f5f5;
}

.top-nav {
  padding: 0 24px;
  background: white;
  border-bottom: 1px solid #e8e8e8;
}

.top-nav :deep(.ant-tabs-nav) {
  margin: 0;
}

.top-nav :deep(.ant-tabs-content-holder) {
  padding: 24px;
}
</style>
